<template>
  <div>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="4">
        <!-- 左侧logo -->
        <a href="#">
          <img src="./hot_img.png" alt="">
        </a>
      </el-col>
      <el-col :span="20">
        <!-- 两行，第一行是topbigNews，第二行是两个小news -->
        <!-- <el-row type="flex" justify="center" class="topbigNews">
          <el-col :span="24">
              <a href="#">从奥运会到全运会，运动员带来的“正确审美”会成为时代主流吗？</a>
          </el-col>
        </el-row> -->
        <el-row type="flex" justify="center" class="topbigNews">
          <el-col :span="24">
            <a
              href="#"
            >{{ news[0].newsTitle }}</a>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" class="topsmallNews">
          <el-breadcrumb separator="|">
            <!-- <el-breadcrumb-item v-for="(item,index) in top3News.slice(1,3)" :key="index">
              <a :href="'/News/'+item.id">{{item.title}}</a>
            </el-breadcrumb-item> -->
            <el-breadcrumb-item>
              <a href="#">{{ news[1].newsTitle }}</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="#">{{ news[2].newsTitle }}</a>
            </el-breadcrumb-item>

            <el-breadcrumb-item>
              <a href="#">【更多】</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
      </el-col>
    </el-row>
    <!-- <div>{{gettop3News}}</div> -->
    <!-- <div>{{$store.getters.gettop3News}}</div> -->
  </div>
</template>

<style scoped>
a {
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: rgb(191, 64, 56) !important;
}
.topbigNews a {
  font-size: xx-large;
  font-weight: 600;
  margin-top: 20px;
  color: #000;
  display: block;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.topsmallNews {
  margin-top: 10px;
}
.topsmallNews a {
  font-weight: 400;
}
</style>

<script>
export default {
  props: {
    news: {
      type: Array,
      required: true
    }
  },
  computed: {
  },
  created() {
    console.log(this.news)
  }

}
</script>
